Вытащить переменную из XMLHttpRequest

[galiog]

Здравствуйте. Прошу помощи в таком моменте. Есть метод:

getJsons(){
      let name= '' ;
      let request = new XMLHttpRequest();
      request.open('GET', '../name.json');
      request.onreadystatechange = function(e) {
          if (this.readyState == 4) {
              if (this.status == 200) {
                  var response = JSON.parse(this.responseText);
                return  name = response["price"][1]["descr"];
              }
              else {
                  // тут сообщаем о сетевой ошибке
              }
          }
      }
      request.send(null);
     
     }

Мне нужно вытащить переменную name, в которой данные из json. Если просто написать при статусе 200 alert или console.log, то все отрабатывает. А из вне не могу до нее никак добраться. Написал уже return, но не помогает.

[j0hnik]

Либо сделать глобальной, либо передать аргументом там где она нужна.

[galiog]

name ='описание';
        getJsons(){
       // this.name = 'Нажали';
     var request = new XMLHttpRequest();
      request.open('GET', '../ssl.json');
      request.onreadystatechange = function(e) {
          if (this.readyState == 4) {
              if (this.status == 200) {
                  var response = JSON.parse(this.responseText);
                  this.name = response["pricelist"][1]["name"];
                 }
              else {
                  // тут сообщаем о сетевой ошибке
              }
          }
      }
      request.send(null);
     }

Спасибо за ответ. Вынес переменную в глобальную область видимости. Попробовал выполнить простую команду this.name = 'Нажали'; по клику, она сработала, переменная передалась. Сейчас строку закомментировал эту. А this.name = response["pricelist"][1]["name"]; по прежнему не передается, сейчас вылазит ошибка name is not defined. Но почему? Она же определена...

[galiog]

Добавлю немного информации)
Вообще все делаю на втором ангуляре. По сути мне надо в переменную в шаблоне компонента биндить новое значение по клику.

<button (click)="getJsons()">Клик</button>
  <p>{{name}}</p>

По клику собственно я вызываю мою функцию. Причем с таким кодом:

export class WindowComponent{
    name:string = '';
    getJsons(){
            var request = new XMLHttpRequest();
            request.open('GET', '../ssl.json');
            request.onreadystatechange = function(e) {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        var response = JSON.parse(this.responseText);
                        this.name = response["pricelist"][1]["name"];
                    }
                    else {
                        // тут сообщаем о сетевой ошибке
                    }
                }
            }
            request.send(null);
    }

}

Ошибок нет и во вкладке network видно что запросы улетаю. Просто данные не попадают в переменную.

[Nexus]

galiog, "this" в строке 10 - не экземпляр класса "WindowComponent", но экземпляр "XMLHttpRequest".
В методе создайте ссылку на контекст и в "onreadystatechange" через эту ссылку измените нужное свойство.

[galiog]

Спасибо! Сделал вот так и все заработало:

name = '';
    getJsons(){
            let self = this;
            let request = new XMLHttpRequest();
            request.open('GET', '../ssl.json');
            request.onreadystatechange = function(e) {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        var response = JSON.parse(this.responseText);
                        self.name = response["pricelist"][1]["description"];
                    }
                    else {
                        // тут сообщаем о сетевой ошибке
                    }
                }
            }
            request.send(null);
    }

Ох уж этот контекст. Учить еще да учить.